import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'

import image1 from '../../../../assets/icons/scan.png'
import image2 from '../../../../assets/icons/search.png'
import image3 from '../../../../assets/icons/photo.png'
import image4 from '../../../../assets/icons/barcode.png'

import './index.scss'

const placeholder = [
  {
      title: '防晒霜'
  },
  {
      title: '精品好衣'
  },
  {
      title: '节日大优惠'
  }
]


function Index () {
  return (
    <View className="search-container">
      <View className="search-code">
          <Image className="search-image1" src={image1} />
          <Text className="search-text1">
              扫一扫
          </Text>
      </View>
      <View className="search-div">
          <Image className="search-image" src={image2} />
          <Swiper className="search-findswiper" autoplay vertical>
            {placeholder.map(item => (
              <SwiperItem>
                <Text className="search-placeholder">
                  {item.title}
                </Text>
              </SwiperItem>
            ))}
          </Swiper>
          <Image className="search-image" src={image3} />
      </View>
      <View className="search-code">
          <Image className="search-image1" src={image4} />
          <Text className="search-text1">
              会员码
          </Text>
      </View>
  </View>
  )
}

export default Index
